<template>
  <view class="fillet-label">
    <view class="title" :style="[iconStyle]">{{ title }}</view>
  </view>
</template>
<script>
/**
 * ve-modal 弹框
 * @property {Array} list 步骤条list
 */
export default {
  name: 'fillet-label',
  props: {
    title: {
      type: String,
      default: '-',
    },
    color: {
      type: String,
      default: '',
    },
    background: {
      type: String,
      default: '#fff',
    },
    fontSize: {
      type: Number,
      default: 12,
    },
    plain: Boolean,
  },
  data() {
    return {
      colors: {
        blue: {
          color: '#3491FA',
          background: '#E8F7FF',
          border: '1px solid #3491FA',
        },
        orange: {
          color: '#ff7d00',
          background: '#fff7e8',
          border: '1px solid #ff7d00',
        },
        red: {
          color: '#f53f3f',
          background: '#ffece8',
          border: '1px solid #f53f3f',
        },
      },
    }
  },
  computed: {
    iconStyle() {
      let style = this.colors[this.color]
      if (!style) {
        style = {
          color: this.color,
          background: this.background,
          border: '1px solid ' + this.color,
        }
      }
      if (this.plain == false) {
        style.border = 'none'
      }
      return { ...style, 'font-size': this.fontSize + 'px' }
    },
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
.fillet-label {
  display: inline-block;
}
.title {
  background: #e8f7ff;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;

  padding: 0 8px;
}
</style>
